<template>
	<view class="d-inline-block position-relative">
		<button size="mini" class="mx-1 my-1"
			:style="getStyle" @click="$emit('click')" :class="bool?'main-bg-color':''">{{item.name}}</button>
			<slot></slot>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue'
	const props = defineProps(['item','color','bool'])
	const getStyle = computed(()=>{
		if(!props.color){
			return `border:1px solid #f4f4f4;background:#fff`;
		}else {
			let borderColor = ['#EEA6AA', '#DD6A4B', '#98D5D8', '#9DBE93', '#BCCD99'];
			let backGround = ['#F8EAE9', '#FFBEC6', '#E8F6F6', '#E4F5E2', '#F2F6E8'];
			let index = Math.floor(Math.random()*borderColor.length)
			return `border:1px solid ${borderColor[index]};background:${backGround[index]}`;
		}
	})
</script>

<style>

</style>